<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>VS Code 常用操作 | 小熊的技术文档</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/fav.ico">
    <link rel="stylesheet" href="/css/katex.min.css">
    <link rel="stylesheet" href="/css/github-markdown.min.css">
    <meta name="description" content="衣带渐宽终不悔，为伊消得人憔悴">
    
    <link rel="preload" href="/assets/css/0.styles.e6449353.css" as="style"><link rel="preload" href="/assets/js/app.9e067b79.js" as="script"><link rel="preload" href="/assets/js/2.983eb755.js" as="script"><link rel="preload" href="/assets/js/40.a22c9c27.js" as="script"><link rel="prefetch" href="/assets/js/10.79548333.js"><link rel="prefetch" href="/assets/js/11.31600f80.js"><link rel="prefetch" href="/assets/js/12.62bd3528.js"><link rel="prefetch" href="/assets/js/13.de8b1ace.js"><link rel="prefetch" href="/assets/js/14.f5db1e75.js"><link rel="prefetch" href="/assets/js/15.bf827d4d.js"><link rel="prefetch" href="/assets/js/16.cc9a1a73.js"><link rel="prefetch" href="/assets/js/17.2cfaefeb.js"><link rel="prefetch" href="/assets/js/18.3af7782b.js"><link rel="prefetch" href="/assets/js/19.639f7e7b.js"><link rel="prefetch" href="/assets/js/20.dc862f59.js"><link rel="prefetch" href="/assets/js/21.916e1685.js"><link rel="prefetch" href="/assets/js/22.d7a955f4.js"><link rel="prefetch" href="/assets/js/23.078391ef.js"><link rel="prefetch" href="/assets/js/24.bb460a5a.js"><link rel="prefetch" href="/assets/js/25.d69f2326.js"><link rel="prefetch" href="/assets/js/26.6da7ea48.js"><link rel="prefetch" href="/assets/js/27.82e23d91.js"><link rel="prefetch" href="/assets/js/28.9073bbec.js"><link rel="prefetch" href="/assets/js/29.639259a4.js"><link rel="prefetch" href="/assets/js/3.e594e5b2.js"><link rel="prefetch" href="/assets/js/30.b49c622d.js"><link rel="prefetch" href="/assets/js/31.92f6c8b3.js"><link rel="prefetch" href="/assets/js/32.42419088.js"><link rel="prefetch" href="/assets/js/33.c82e2ab8.js"><link rel="prefetch" href="/assets/js/34.381de37e.js"><link rel="prefetch" href="/assets/js/35.5e86d478.js"><link rel="prefetch" href="/assets/js/36.31f218ce.js"><link rel="prefetch" href="/assets/js/37.0d287b3f.js"><link rel="prefetch" href="/assets/js/38.1324cf44.js"><link rel="prefetch" href="/assets/js/39.de6bdb51.js"><link rel="prefetch" href="/assets/js/4.440c4dd9.js"><link rel="prefetch" href="/assets/js/41.4637d617.js"><link rel="prefetch" href="/assets/js/42.db815e2b.js"><link rel="prefetch" href="/assets/js/43.f0955a92.js"><link rel="prefetch" href="/assets/js/44.7d5faddf.js"><link rel="prefetch" href="/assets/js/45.a88ffc33.js"><link rel="prefetch" href="/assets/js/46.883caa71.js"><link rel="prefetch" href="/assets/js/47.6f2cfd60.js"><link rel="prefetch" href="/assets/js/48.ea25654e.js"><link rel="prefetch" href="/assets/js/49.f38c23a0.js"><link rel="prefetch" href="/assets/js/5.e8844f36.js"><link rel="prefetch" href="/assets/js/50.e03dd8e9.js"><link rel="prefetch" href="/assets/js/51.f6160d52.js"><link rel="prefetch" href="/assets/js/52.4daa8322.js"><link rel="prefetch" href="/assets/js/53.b30992e9.js"><link rel="prefetch" href="/assets/js/54.209f17e1.js"><link rel="prefetch" href="/assets/js/55.4f1dd95b.js"><link rel="prefetch" href="/assets/js/56.147ea3e8.js"><link rel="prefetch" href="/assets/js/57.5823e0e2.js"><link rel="prefetch" href="/assets/js/58.772320f9.js"><link rel="prefetch" href="/assets/js/59.5ab55a80.js"><link rel="prefetch" href="/assets/js/6.54e1cc95.js"><link rel="prefetch" href="/assets/js/60.b47b75bb.js"><link rel="prefetch" href="/assets/js/61.0cd5a012.js"><link rel="prefetch" href="/assets/js/62.35eb5453.js"><link rel="prefetch" href="/assets/js/63.d31f2118.js"><link rel="prefetch" href="/assets/js/64.03d35d7c.js"><link rel="prefetch" href="/assets/js/65.8bdc633f.js"><link rel="prefetch" href="/assets/js/66.dbbe8867.js"><link rel="prefetch" href="/assets/js/67.228613b5.js"><link rel="prefetch" href="/assets/js/68.d10a2687.js"><link rel="prefetch" href="/assets/js/69.7903847f.js"><link rel="prefetch" href="/assets/js/7.f5ab00eb.js"><link rel="prefetch" href="/assets/js/70.11ee4e27.js"><link rel="prefetch" href="/assets/js/8.95b39934.js"><link rel="prefetch" href="/assets/js/9.26cfd48c.js">
    <link rel="stylesheet" href="/assets/css/0.styles.e6449353.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">小熊的技术文档</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/front-end/" class="nav-link">
  🎨前端
</a></div><div class="nav-item"><a href="/back-end/" class="nav-link">
  💻后端
</a></div><div class="nav-item"><a href="/practice/" class="nav-link">
  🚀实战
</a></div><div class="nav-item"><a href="/office/" class="nav-link">
  🏢办公
</a></div><div class="nav-item"><a href="/general/" class="nav-link router-link-active">
  🍓通用
</a></div><div class="nav-item"><a href="/paper/" class="nav-link">
  🐸论文
</a></div><div class="nav-item"><a href="/general/fast.html" class="nav-link">
  ⚡快速笔记
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="🦉近期重点" class="dropdown-title"><span class="title">🦉近期重点</span> <span class="arrow down"></span></button> <button type="button" aria-label="🦉近期重点" class="mobile-dropdown-title"><span class="title">🦉近期重点</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/back-end/python.html" class="nav-link">
  🐇python常用模块
</a></li><li class="dropdown-item"><!----> <a href="/practice/zrender.html" class="nav-link">
  🌹zrender源码解析
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="⭐️资源" class="dropdown-title"><span class="title">⭐️资源</span> <span class="arrow down"></span></button> <button type="button" aria-label="⭐️资源" class="mobile-dropdown-title"><span class="title">⭐️资源</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://www.birdiesearch.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小鸟搜索
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://salttiger.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  每天一本编程书
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://gitee.com/docmirror/dev-sidecar" target="_blank" rel="noopener noreferrer" class="nav-link external">
  开发者边车
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/front-end/" class="nav-link">
  🎨前端
</a></div><div class="nav-item"><a href="/back-end/" class="nav-link">
  💻后端
</a></div><div class="nav-item"><a href="/practice/" class="nav-link">
  🚀实战
</a></div><div class="nav-item"><a href="/office/" class="nav-link">
  🏢办公
</a></div><div class="nav-item"><a href="/general/" class="nav-link router-link-active">
  🍓通用
</a></div><div class="nav-item"><a href="/paper/" class="nav-link">
  🐸论文
</a></div><div class="nav-item"><a href="/general/fast.html" class="nav-link">
  ⚡快速笔记
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="🦉近期重点" class="dropdown-title"><span class="title">🦉近期重点</span> <span class="arrow down"></span></button> <button type="button" aria-label="🦉近期重点" class="mobile-dropdown-title"><span class="title">🦉近期重点</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/back-end/python.html" class="nav-link">
  🐇python常用模块
</a></li><li class="dropdown-item"><!----> <a href="/practice/zrender.html" class="nav-link">
  🌹zrender源码解析
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="⭐️资源" class="dropdown-title"><span class="title">⭐️资源</span> <span class="arrow down"></span></button> <button type="button" aria-label="⭐️资源" class="mobile-dropdown-title"><span class="title">⭐️资源</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://www.birdiesearch.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小鸟搜索
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://salttiger.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  每天一本编程书
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://gitee.com/docmirror/dev-sidecar" target="_blank" rel="noopener noreferrer" class="nav-link external">
  开发者边车
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/general/fast.html" class="sidebar-link">快速笔记</a></li><li><a href="/general/git.html" class="sidebar-link">git 使用攻略</a></li><li><a href="/general/markdown.html" class="sidebar-link">Markdown基本语法</a></li><li><a href="/general/nexus.html" class="sidebar-link">nexus3搭建私有源</a></li><li><a href="/general/latex.html" class="sidebar-link">Katex/Latex 公式速查</a></li><li><a href="/general/vscode.html" aria-current="page" class="active sidebar-link">VS Code 常用操作</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/general/vscode.html#常用配置" class="sidebar-link">常用配置</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/general/vscode.html#配置不自动更新" class="sidebar-link">配置不自动更新</a></li><li class="sidebar-sub-header"><a href="/general/vscode.html#配置连字" class="sidebar-link">配置连字</a></li><li class="sidebar-sub-header"><a href="/general/vscode.html#修改vscode默认markdown预览样式" class="sidebar-link">修改vscode默认markdown预览样式</a></li></ul></li><li class="sidebar-sub-header"><a href="/general/vscode.html#实用插件" class="sidebar-link">实用插件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/general/vscode.html#liveserver" class="sidebar-link">LiveServer</a></li><li class="sidebar-sub-header"><a href="/general/vscode.html#debugger-for-chrome" class="sidebar-link">Debugger for Chrome</a></li><li class="sidebar-sub-header"><a href="/general/vscode.html#tiny-light" class="sidebar-link">Tiny Light</a></li><li class="sidebar-sub-header"><a href="/general/vscode.html#todo-tree" class="sidebar-link">Todo Tree</a></li><li class="sidebar-sub-header"><a href="/general/vscode.html#markdown-paste" class="sidebar-link">Markdown Paste</a></li></ul></li><li class="sidebar-sub-header"><a href="/general/vscode.html#常用快捷键" class="sidebar-link">常用快捷键</a></li><li class="sidebar-sub-header"><a href="/general/vscode.html#快捷键配置" class="sidebar-link">快捷键配置</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/general/vscode.html#vscode-的-markdown-增强" class="sidebar-link">vscode 的 markdown 增强</a></li></ul></li><li class="sidebar-sub-header"><a href="/general/vscode.html#ts-实战中的部分设置" class="sidebar-link">ts 实战中的部分设置</a></li></ul></li><li><a href="/general/guide.html" class="sidebar-link">搭建指南</a></li><li><a href="/general/reg.html" class="sidebar-link">正则表达式</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="vs-code-常用操作"><a href="#vs-code-常用操作" class="header-anchor">#</a> VS Code 常用操作</h1> <h2 id="常用配置"><a href="#常用配置" class="header-anchor">#</a> 常用配置</h2> <blockquote><p><a href="https://code.visualstudio.com/" target="_blank" rel="noopener noreferrer">Vistual Studio Code<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>是一款由微软开发且跨平台的免费源代码编辑器。该软件支持语法高亮、代码自动补全（又称IntelliSense）、代码重构、查看定义功能，并且内置了命令行工具和Git版本控制系统。用户可以更改主题和键盘快捷方式实现个性化设置，也可以通过内置的扩展程序商店安装扩展以拓展软件功能。</p></blockquote> <h3 id="配置不自动更新"><a href="#配置不自动更新" class="header-anchor">#</a> 配置不自动更新</h3> <p>[文件]-&gt;[首选项]-&gt;[设置], 进入设置页面, 搜索&quot;update&quot;, 将<strong>Update: Enable Windows Background Updates</strong>(windows 后台更新)设为<code>false</code>, 将<strong>Update: Mode</strong>(更新模式)设置为<code>none</code>.</p> <h3 id="配置连字"><a href="#配置连字" class="header-anchor">#</a> 配置连字</h3> <p>下载并安装<a href="https://github.com/tonsky/FiraCode/releases" target="_blank" rel="noopener noreferrer">FiraCode 字体<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>, 在[设置]中搜索&quot;font&quot;, 配置<strong>Editor: Font Family</strong>(编辑器字体)设为<code>Fira Code, Consolas, Microsoft YaHei</code>, <strong>editor.fontLigatures</strong>(编辑器连字)设为<code>true</code>. 用户配置在<code>C:\Users\${用户名}\AppData\Roaming\Code\User</code>下的<code>settings.json</code>文件中, 典型项如下:</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;update.mode&quot;</span><span class="token operator">:</span> <span class="token string">&quot;none&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;workbench.iconTheme&quot;</span><span class="token operator">:</span> <span class="token string">&quot;material-icon-theme&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;editor.minimap.enabled&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token property">&quot;editor.renderWhitespace&quot;</span><span class="token operator">:</span> <span class="token string">&quot;none&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;editor.fontFamily&quot;</span><span class="token operator">:</span> <span class="token string">&quot;Fira Code, Consolas, Microsoft YaHei&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;editor.fontLigatures&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token property">&quot;workbench.colorTheme&quot;</span><span class="token operator">:</span> <span class="token string">&quot;Visual Studio Dark&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;update.enableWindowsBackgroundUpdates&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="修改vscode默认markdown预览样式"><a href="#修改vscode默认markdown预览样式" class="header-anchor">#</a> 修改vscode默认markdown预览样式</h3> <p>默认markdown的显示效果一般，标题前面没有形“1.1，2.1”的标号，首行也不空2格等问题，为了修改默认预览样式，可以在项目根目录增加文件<code>markdown_preview.css</code>，文件内容如下：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">body</span> <span class="token punctuation">{</span>
  <span class="token property">-ms-text-size-adjust</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">-webkit-text-size-adjust</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 1.5<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>248<span class="token punctuation">,</span> 248<span class="token punctuation">,</span> 248<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #333<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 18px<span class="token punctuation">;</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">&quot;Source Code Pro&quot;</span><span class="token punctuation">,</span> Consolas<span class="token punctuation">,</span> Menlo<span class="token punctuation">,</span> Monaco<span class="token punctuation">,</span> <span class="token string">&quot;Courier New&quot;</span><span class="token punctuation">,</span> monospace<span class="token punctuation">,</span> <span class="token string">&quot;FZSSJW&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;方正书宋简体&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Microsoft YaHei&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Helvetica Neue&quot;</span><span class="token punctuation">,</span> Helvetica<span class="token punctuation">,</span> Arial<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">code</span><span class="token punctuation">{</span>
<span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'楷体'</span><span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>248<span class="token punctuation">,</span> 248<span class="token punctuation">,</span> 248<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 1.05em <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> #333<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">p</span> <span class="token punctuation">{</span>
<span class="token property">text-indent</span><span class="token punctuation">:</span> 2em<span class="token punctuation">;</span>
<span class="token property">font-weight</span><span class="token punctuation">:</span> 400<span class="token punctuation">;</span>
<span class="token property">line-height</span><span class="token punctuation">:</span> 1.5<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span> 0.6em 0<span class="token punctuation">;</span>

<span class="token punctuation">}</span>

<span class="token selector">h1</span> <span class="token punctuation">{</span>
<span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">&quot;方正小标宋简体&quot;</span><span class="token punctuation">,</span> Consolas<span class="token punctuation">,</span> Menlo<span class="token punctuation">,</span> Monaco<span class="token punctuation">,</span> <span class="token string">&quot;Courier New&quot;</span><span class="token punctuation">,</span> monospace<span class="token punctuation">,</span> <span class="token string">&quot;FZSSJW&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;方正书宋简体&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Microsoft YaHei&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Helvetica Neue&quot;</span><span class="token punctuation">,</span> Helvetica<span class="token punctuation">,</span> Arial<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
<span class="token property">font-weight</span><span class="token punctuation">:</span> 700<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">h2,
h3,
h4,
h5,
h6</span> <span class="token punctuation">{</span>
<span class="token property">font-weight</span><span class="token punctuation">:</span> 700<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span> 1em 0 0 0<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">font-family</span><span class="token punctuation">:</span> -apple-system<span class="token punctuation">,</span> BlinkMacSystemFont<span class="token punctuation">,</span> <span class="token string">&quot;Apple Color Emoji&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;PingFang SC&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Hiragino Sans GB&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Microsoft YaHei&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Helvetica Neue&quot;</span><span class="token punctuation">,</span> Helvetica<span class="token punctuation">,</span> Arial<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">h1</span> <span class="token punctuation">{</span>
  <span class="token property">counter-reset</span><span class="token punctuation">:</span> h2<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">h2</span> <span class="token punctuation">{</span>
  <span class="token property">counter-reset</span><span class="token punctuation">:</span> h3<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">h3</span> <span class="token punctuation">{</span>
  <span class="token property">counter-reset</span><span class="token punctuation">:</span> h4<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">h4</span> <span class="token punctuation">{</span>
  <span class="token property">counter-reset</span><span class="token punctuation">:</span> h5<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">h2:before</span> <span class="token punctuation">{</span>
  <span class="token property">counter-increment</span><span class="token punctuation">:</span> h2<span class="token punctuation">;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token function">counter</span><span class="token punctuation">(</span>h2<span class="token punctuation">)</span> <span class="token string">&quot; &quot;</span>
<span class="token punctuation">}</span>

<span class="token selector">h3:before</span> <span class="token punctuation">{</span>
  <span class="token property">counter-increment</span><span class="token punctuation">:</span> h3<span class="token punctuation">;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token function">counter</span><span class="token punctuation">(</span>h2<span class="token punctuation">)</span><span class="token string">&quot;.&quot;</span> <span class="token function">counter</span><span class="token punctuation">(</span>h3<span class="token punctuation">)</span> <span class="token string">&quot; &quot;</span>
<span class="token punctuation">}</span>

<span class="token selector">h3:before</span> <span class="token punctuation">{</span>
  <span class="token property">counter-increment</span><span class="token punctuation">:</span> h3<span class="token punctuation">;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token function">counter</span><span class="token punctuation">(</span>h2<span class="token punctuation">)</span><span class="token string">&quot;.&quot;</span> <span class="token function">counter</span><span class="token punctuation">(</span>h3<span class="token punctuation">)</span> <span class="token string">&quot; &quot;</span>
<span class="token punctuation">}</span>

<span class="token selector">h4:before</span> <span class="token punctuation">{</span>
  <span class="token property">counter-increment</span><span class="token punctuation">:</span> h4<span class="token punctuation">;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token function">counter</span><span class="token punctuation">(</span>h2<span class="token punctuation">)</span><span class="token string">&quot;.&quot;</span> <span class="token function">counter</span><span class="token punctuation">(</span>h3<span class="token punctuation">)</span> <span class="token string">&quot;.&quot;</span> <span class="token function">counter</span><span class="token punctuation">(</span>h4<span class="token punctuation">)</span> <span class="token string">&quot; &quot;</span>
<span class="token punctuation">}</span>

<span class="token selector">h5:before</span> <span class="token punctuation">{</span>
  <span class="token property">counter-increment</span><span class="token punctuation">:</span> h5<span class="token punctuation">;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">&quot;(&quot;</span> <span class="token function">counter</span><span class="token punctuation">(</span>h5<span class="token punctuation">)</span> <span class="token string">&quot;)&quot;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>然后在<code>vscode</code>的设置中，<code>Markdown: Styles</code>部分增加<code>markdown_preview.css</code>即可生效，如下图所示。</p> <p><img src="https://ftp.bmp.ovh/imgs/2021/09/65bb7dedd83d63a7.png" alt="markdown_preview.css设置"></p> <h2 id="实用插件"><a href="#实用插件" class="header-anchor">#</a> 实用插件</h2> <p>VScode的<a href="https://marketplace.visualstudio.com/VSCode" target="_blank" rel="noopener noreferrer">插件功能<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>十分强大，既可以在VScode中搜索下载，也可以下载离线版本，下面记录一些实用插件。</p> <h3 id="liveserver"><a href="#liveserver" class="header-anchor">#</a> LiveServer</h3> <p>插件名称为<code>ritwickdey.LiveServer</code>，启动具有实时重新加载功能的本地开发服务器，以处理静态和动态页面。使用方法如下：</p> <p><strong>方式1</strong>：打开一个项目，单击状态栏的<code>Go Live</code>以打开/关闭服务器。</p> <p><img src="https://pic.imgdb.cn/item/609f57146ae4f77d35f64de9.jpg" alt="Go Live"></p> <p><strong>方式2</strong>：右键单击资源管理器窗口中的<code>.HTML</code>文件，然后单击<code>Open with Live Server</code>。</p> <p><strong>方式3</strong>：打开一个HTML文件，右键单击编辑器，然后单击<code>Open with Live Server</code>。</p> <p>支持的功能有：</p> <ul><li>快速开发静态服务器，支持实时热加载。</li> <li>通过从状态栏单击来启动或停止服务器。</li> <li>从资源管理器菜单打开<code>.HTML</code>文件到浏览器。</li> <li>可自定义的端口号，服务器根目录，默认浏览器。</li></ul> <h3 id="debugger-for-chrome"><a href="#debugger-for-chrome" class="header-anchor">#</a> Debugger for Chrome</h3> <p>插件名称为<code>msjsdiag.debugger-for-chrome</code>，可在在Chrome浏览器或任何其他支持Chrome Debugger协议的目标中调试JavaScript代码。使用方式：</p> <p><strong>配置</strong>：Debugger for Chrome以两种模式运行：一是在Chrome浏览器上运行（launch）实例，二是将其附加（attach）到现有的Chrome实例上。就像使用Node调试器一样，您可以在项目的根目录中使用文件<code>.vscode/launch.json</code>配置这些模式。</p> <p><strong>方式1-Launch（启动）</strong>：使用<code>&quot;request&quot;: &quot;launch&quot;</code>，这时必须指定file或url以针对本地文件或URL启动Chrome，<code>launch.json</code>中的实例如下：</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
    <span class="token property">&quot;version&quot;</span><span class="token operator">:</span> <span class="token string">&quot;0.1.0&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;configurations&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
            <span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;Launch localhost&quot;</span><span class="token punctuation">,</span>
            <span class="token property">&quot;type&quot;</span><span class="token operator">:</span> <span class="token string">&quot;chrome&quot;</span><span class="token punctuation">,</span>
            <span class="token property">&quot;request&quot;</span><span class="token operator">:</span> <span class="token string">&quot;launch&quot;</span><span class="token punctuation">,</span>
            <span class="token property">&quot;url&quot;</span><span class="token operator">:</span> <span class="token string">&quot;http://localhost/mypage.html&quot;</span><span class="token punctuation">,</span>
            <span class="token property">&quot;webRoot&quot;</span><span class="token operator">:</span> <span class="token string">&quot;${workspaceFolder}/wwwroot&quot;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
            <span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;Launch index.html&quot;</span><span class="token punctuation">,</span>
            <span class="token property">&quot;type&quot;</span><span class="token operator">:</span> <span class="token string">&quot;chrome&quot;</span><span class="token punctuation">,</span>
            <span class="token property">&quot;request&quot;</span><span class="token operator">:</span> <span class="token string">&quot;launch&quot;</span><span class="token punctuation">,</span>
            <span class="token property">&quot;file&quot;</span><span class="token operator">:</span> <span class="token string">&quot;${workspaceFolder}/index.html&quot;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
            <span class="token property">&quot;type&quot;</span><span class="token operator">:</span> <span class="token string">&quot;chrome&quot;</span><span class="token punctuation">,</span>
            <span class="token property">&quot;request&quot;</span><span class="token operator">:</span> <span class="token string">&quot;launch&quot;</span><span class="token punctuation">,</span>
            <span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;在chrome中调试当前文件&quot;</span><span class="token punctuation">,</span>
            <span class="token property">&quot;file&quot;</span><span class="token operator">:</span> <span class="token string">&quot;${file}&quot;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>方式2-Attach（附加）</strong>：使用<code>&quot;request&quot;: &quot;launch&quot;</code>，必须在启用了远程调试的情况下启动Chrome，才能将扩展程序附加到它。</p> <p>在windows中启动chrome调试的设置方式如下。右键单击<code>Chrome</code>快捷方式，选择<code>属性</code>，在“目标”字段中，附加<code>--remote-debugging-port=9222</code>后运行。或者在命令提示符下执行 <code>&lt;path to chrome&gt;/chrome.exe --remote-debugging-port=9222</code>。</p> <p>launch.json“附加”配置的示例文件如下：</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
    <span class="token property">&quot;version&quot;</span><span class="token operator">:</span> <span class="token string">&quot;0.1.0&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;configurations&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
            <span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;Attach to url with files served from ./out&quot;</span><span class="token punctuation">,</span>
            <span class="token property">&quot;type&quot;</span><span class="token operator">:</span> <span class="token string">&quot;chrome&quot;</span><span class="token punctuation">,</span>
            <span class="token property">&quot;request&quot;</span><span class="token operator">:</span> <span class="token string">&quot;attach&quot;</span><span class="token punctuation">,</span>
            <span class="token property">&quot;port&quot;</span><span class="token operator">:</span> <span class="token number">9222</span><span class="token punctuation">,</span>
            <span class="token property">&quot;url&quot;</span><span class="token operator">:</span> <span class="token string">&quot;&lt;url of the open browser tab to connect to&gt;&quot;</span><span class="token punctuation">,</span>
            <span class="token property">&quot;webRoot&quot;</span><span class="token operator">:</span> <span class="token string">&quot;${workspaceFolder}/out&quot;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><p>支持的功能有：</p> <ul><li>设置断点，在vscode中设置断点即可，支持包括在启用源映射时在源文件中的断点</li> <li>步进，包括Chrome浏览器上的按钮</li> <li>监听变量</li> <li>Console控制台</li></ul> <h3 id="tiny-light"><a href="#tiny-light" class="header-anchor">#</a> Tiny Light</h3> <p>插件名称为<code>luqimin.tiny-light</code>，柔和的绿色主题，对眼睛很好，主题预览如下。</p> <p><img src="https://pic.imgdb.cn/item/609f60536ae4f77d3568ab89.jpg" alt="Tiny Light主题预览"></p> <p>使用方法如下：点击<code>文件</code>, <code>首选项</code>，<code>颜色主题</code>，在浅色主题下选择<code>Tiny Light</code>即可。</p> <h3 id="todo-tree"><a href="#todo-tree" class="header-anchor">#</a> Todo Tree</h3> <p>插件名称为<code>Gruntfuggly.todo-tree</code>，这个插件可以快速在工作空间中搜索注释标签（例如TODO和FIXME），并将其显示在资源管理器窗格的树状视图中。单击树中的TODO将打开文件，并将光标放在包含TODO的行上。</p> <h3 id="markdown-paste"><a href="#markdown-paste" class="header-anchor">#</a> Markdown Paste</h3> <p>插件全称为<a href="https://marketplace.visualstudio.com/items?itemName=telesoho.vscode-markdown-paste-image" target="_blank" rel="noopener noreferrer">telesoho.vscode-markdown-paste-image<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，下载地址为<a href="https://marketplace.visualstudio.com/_apis/public/gallery/publishers/telesoho/vsextensions/vscode-markdown-paste-image/0.13.8/vspackage" target="_blank" rel="noopener noreferrer">vscode-markdown-paste-image<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，由国人开发，如果复制图片，然后在VS code中按下快捷键<strong>Ctrl+Alt+V</strong>，会触发插件的智能粘贴功能，然后弹出对话框，询问用户文件名应该是什么，然后将其自动插入到指定位置，操作过程如下图所示。</p> <p><img src="https://github.com/telesoho/vscode-markdown-paste-image/raw/HEAD/res/markdown-paste-rich-text-html-table.gif" alt="官方示意"></p> <p>在插件设置中的<code>Markdown Paste:Path</code>中能修改图片默认保存位置。例如在项目<code>MarkdownPaper</code>中，可以将其修改为<code>./static/</code>，如下图所示。</p> <p><img src="https://ftp.bmp.ovh/imgs/2021/09/94ad9265a4d5841f.png" alt="修改配置"></p> <h2 id="常用快捷键"><a href="#常用快捷键" class="header-anchor">#</a> 常用快捷键</h2> <ol><li>放大缩小整个编辑器, 默认快捷键是<code>ctrl</code>+<code>=</code>和<code>ctrl</code>+<code>-</code></li> <li>显示命令窗口: <code>ctrl</code>+<code>shift</code>+<code>p</code></li> <li>快速打开文件: <code>ctrl</code>+<code>shift</code>+<code>p</code></li> <li>进入设置页面: <code>ctrl</code> + <code>,</code>, (搜狗输入法默认切换跟该快捷键冲突, 建议进入搜狗输入法的<code>输入法管理</code>页面, 建议修改为<code>ctrl</code>+<code>backspace</code>)<br> <img src="https://s1.ax1x.com/2020/04/05/GBp4VP.png" alt="搜狗输入法默认快捷键"></li></ol> <h2 id="快捷键配置"><a href="#快捷键配置" class="header-anchor">#</a> 快捷键配置</h2> <p>因为之前一直使用 eclipse, 惯用的快捷键设置如下, 替换<code>C:\Users\${用户名}\AppData\Roaming\Code\User</code>下的<code>keybindings.json</code>文件内容.</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">[</span>
  <span class="token comment">// 删除整行 ctrl+d</span>
  <span class="token punctuation">{</span>
    <span class="token property">&quot;key&quot;</span><span class="token operator">:</span> <span class="token string">&quot;ctrl+d&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;command&quot;</span><span class="token operator">:</span> <span class="token string">&quot;editor.action.deleteLines&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;when&quot;</span><span class="token operator">:</span> <span class="token string">&quot;editorTextFocus &amp;&amp; !editorReadonly&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 向上复制行 ctrl+alt+up</span>
  <span class="token punctuation">{</span>
    <span class="token property">&quot;key&quot;</span><span class="token operator">:</span> <span class="token string">&quot;ctrl+alt+up&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;command&quot;</span><span class="token operator">:</span> <span class="token string">&quot;editor.action.copyLinesUpAction&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;when&quot;</span><span class="token operator">:</span> <span class="token string">&quot;editorTextFocus &amp;&amp; !editorReadonly&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 向下复制行 ctrl+alt+down</span>
  <span class="token punctuation">{</span>
    <span class="token property">&quot;key&quot;</span><span class="token operator">:</span> <span class="token string">&quot;ctrl+alt+down&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;command&quot;</span><span class="token operator">:</span> <span class="token string">&quot;editor.action.copyLinesDownAction&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;when&quot;</span><span class="token operator">:</span> <span class="token string">&quot;editorTextFocus &amp;&amp; !editorReadonly&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 上一个编辑点 ctrl+q</span>
  <span class="token punctuation">{</span>
    <span class="token property">&quot;key&quot;</span><span class="token operator">:</span> <span class="token string">&quot;ctrl+q&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;command&quot;</span><span class="token operator">:</span> <span class="token string">&quot;editor.emmet.action.prevEditPoint&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 向下换行 shift+enter</span>
  <span class="token punctuation">{</span>
    <span class="token property">&quot;key&quot;</span><span class="token operator">:</span> <span class="token string">&quot;shift+enter&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;command&quot;</span><span class="token operator">:</span> <span class="token string">&quot;editor.action.insertLineAfter&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;when&quot;</span><span class="token operator">:</span> <span class="token string">&quot;editorTextFocus &amp;&amp; !editorReadonly&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 格式化选中文本 ctrl+alt+l</span>
  <span class="token punctuation">{</span>
    <span class="token property">&quot;key&quot;</span><span class="token operator">:</span> <span class="token string">&quot;ctrl+alt+l&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;command&quot;</span><span class="token operator">:</span> <span class="token string">&quot;editor.action.formatSelection&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;when&quot;</span><span class="token operator">:</span> <span class="token string">&quot;editorHasSelection &amp;&amp; editorTextFocus &amp;&amp; !editorReadonly&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 向下增加光标 shift+alt+down</span>
  <span class="token punctuation">{</span>
    <span class="token property">&quot;key&quot;</span><span class="token operator">:</span> <span class="token string">&quot;shift+alt+down&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;command&quot;</span><span class="token operator">:</span> <span class="token string">&quot;editor.action.insertCursorBelow&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;when&quot;</span><span class="token operator">:</span> <span class="token string">&quot;editorTextFocus&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 向上增加光标 shift+alt+up</span>
  <span class="token punctuation">{</span>
    <span class="token property">&quot;key&quot;</span><span class="token operator">:</span> <span class="token string">&quot;shift+alt+up&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;command&quot;</span><span class="token operator">:</span> <span class="token string">&quot;editor.action.insertCursorAbove&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;when&quot;</span><span class="token operator">:</span> <span class="token string">&quot;editorTextFocus&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 给下一个选中变量增加光标 ctrl+e</span>
  <span class="token punctuation">{</span>
    <span class="token property">&quot;key&quot;</span><span class="token operator">:</span> <span class="token string">&quot;ctrl+e&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;command&quot;</span><span class="token operator">:</span> <span class="token string">&quot;editor.action.addSelectionToNextFindMatch&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;when&quot;</span><span class="token operator">:</span> <span class="token string">&quot;editorFocus&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 代码智能提醒 alt+/</span>
  <span class="token punctuation">{</span>
    <span class="token property">&quot;key&quot;</span><span class="token operator">:</span> <span class="token string">&quot;alt+oem_2&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;command&quot;</span><span class="token operator">:</span> <span class="token string">&quot;editor.action.triggerSuggest&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;when&quot;</span><span class="token operator">:</span> <span class="token string">&quot;editorHasCompletionItemProvider &amp;&amp; editorTextFocus &amp;&amp; !editorReadonly&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 运行任务,crtl+shift+B</span>
  <span class="token punctuation">{</span>
    <span class="token property">&quot;key&quot;</span><span class="token operator">:</span> <span class="token string">&quot;ctrl+shift+b&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;command&quot;</span><span class="token operator">:</span> <span class="token string">&quot;workbench.action.tasks.runTask&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    <span class="token property">&quot;key&quot;</span><span class="token operator">:</span> <span class="token string">&quot;f5&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;command&quot;</span><span class="token operator">:</span> <span class="token string">&quot;-extension.run&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;when&quot;</span><span class="token operator">:</span> <span class="token string">&quot;editorTextFocus&quot;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">]</span>
</code></pre></div><h3 id="vscode-的-markdown-增强"><a href="#vscode-的-markdown-增强" class="header-anchor">#</a> vscode 的 markdown 增强</h3> <ol><li><code>markdown ALL in One</code>安装后使用默认配置就可以, 提供了自动完成和预览功能, 快捷键列表如下:<br> <img src="http://s1.ax1x.com/2020/03/26/8xX4KJ.jpg" alt="Markdown All in One快捷键一览表"></li></ol> <h2 id="ts-实战中的部分设置"><a href="#ts-实战中的部分设置" class="header-anchor">#</a> ts 实战中的部分设置</h2> <p>(1) <strong>默认使用单引号</strong>: 在设置中搜索<code>quote</code>, 在<code>Quote Style</code>中选择<code>single</code>.</p> <p>(2) <strong>代码缩进为 2 个空格</strong>: 在设置中搜索<code>tab</code>, 在<code>Tab Size</code>中设置为<code>2</code>.</p> <p>(3) <strong>代码自动格式化</strong>: 在扩展中搜索并安装<code>prettier</code>, 在设置中搜索<code>format on save</code>, 启用后保存文件会自动格式化代码.</p> <p><img src="https://s1.ax1x.com/2020/04/04/G0uHyV.png" alt="prettier图标"></p> <p>(4) <strong>大纲按照文件位置进行排序</strong>: 大纲默认按照&quot;类别&quot;进行排序, 可点击[大纲]左侧的<code>...</code>(&quot;更多操作&quot;), 选择&quot;排序依据: 位置&quot;即可.</p> <p><img src="https://s1.ax1x.com/2020/04/05/GB9XSe.png" alt="vscode大纲排序"></p> <p>(5) <strong>在 js 中启用 emmet</strong>: 在设置中查找<code>Exclude Languages</code>, 修改<code>setting.json</code>文件, 增加<code>&quot;emmet.includeLanguages&quot;: { &quot;javascript&quot;: &quot;javascriptreact&quot; }</code></p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">更新于:</span> <span class="time">9/5/2021, 12:04:13 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/general/latex.html" class="prev">
        Katex/Latex 公式速查
      </a></span> <span class="next"><a href="/general/guide.html">
        搭建指南
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/assets/js/app.9e067b79.js" defer></script><script src="/assets/js/2.983eb755.js" defer></script><script src="/assets/js/40.a22c9c27.js" defer></script>
  </body>
</html>
